<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: "panel-primary"
  },
  pstyle: {
    type: String,
    default: ""
  }
});
</script>

<template>
  <div class="panel" :class="type" :style="pstyle">
    <div class="panel-heading">
      <h3 class="panel-title">{{title}}</h3>
    </div>
    <div class="panel-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<style scoped>
  .panel {
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 21px;
  }

  .panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
  }

  .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 17px;
    color: inherit;
  }

  .panel-body {
    padding: 15px;
  }

  .panel-primary {
    border-color: #409EFF;
  }

  .panel-primary > .panel-heading {
    color: #ffffff;
    background-color: #409EFF;
    border-color: #F2F6FC;
  }

  .panel-info {
    border-color: #909399;
  }

  .panel-info > .panel-heading {
    color: #ffffff;
    background-color: #2c3e50;
    border-color: #2c3e50;
  }
</style>
